{% extends "base.html" %}
{% block main %}
<div class="columns is-multiline">
  <div class="column is-half uniform-height">
    <div class="card is-shadowless">
      <header class="card-header is-shadowless">
        <p class="card-header-title">
          <span>手机销售数据总览 与 智能手机各项尺寸参数的平均数和中位数</span>
        </p>
        <p class="card-header-icon">
          <span>数据来自京东和苏宁</span>
        </p>
      </header>
      <div class="card-content">
        <table class="table is-bordered is-striped is-hoverable is-fullwidth">
          <thead>
            <tr>
              <th>项目</th>
              <th>数量</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>总销量</td>
              <td>{{ total_tc }} 万台</td>
            </tr>
            <tr>
              <td>商品数量</td>
              <td>{{ total.commodity_count }} 件</td>
            </tr>
            <tr>
              <td>品牌数量</td>
              <td>{{ total.brand_count }} 个</td>
            </tr>
            <tr>
              <td>机型数量</td>
              <td>{{ total.model_count }} 种</td>
            </tr>
          </tbody>
        </table>
        <table class="table is-bordered is-striped is-hoverable is-fullwidth">
          <thead>
          <tr>
            <th>参数</th>
            <th>平均数</th>
            <th>中位数</th>
          </tr>
          </thead>
          <tbody>
            <tr>
              <td>屏幕尺寸</td>
              <td>{{ phone_size.screen_size_avg }} 英寸</td>
              <td>{{ phone_size.screen_size_med }} 英寸</td>
            </tr>
            <tr>
              <td>机身宽度</td>
              <td>{{ phone_size.width_avg }} mm</td>
              <td>{{ phone_size.width_med }} mm</td>
            </tr>
            <tr>
              <td>机身厚度</td>
              <td>{{ phone_size.thickness_avg }} mm</td>
              <td>{{ phone_size.thickness_med }} mm</td>
            </tr>
            <tr>
              <td>机身长度</td>
              <td>{{ phone_size.length_avg }} mm</td>
              <td>{{ phone_size.length_med }} mm</td>
            </tr>
            <tr>
              <td>裸机重量</td>
              <td>{{ phone_size.weight_avg }} g</td>
              <td>{{ phone_size.weight_med }} g</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="column is-half uniform-height" id="platform"></div>
  <div class="column is-full uniform-height" id="hot_models"></div>
  <div class="column is-full more-height" id="phone"></div>
</div>
{% endblock %}

{% block js %}
<script>
document.getElementById("phone_url").classList.add("is-active");
document.getElementById("page_title").innerText = "手机销量总览";
</script>

<script>
// 手机市场热销机型柱状图
let hm_dom = document.getElementById("hot_models");
let hm_chart = echarts.init(hm_dom);
let hm_option = {
  title: {
    text: "线上手机市场热销机型",
    left: "5%"
  },
  tooltip: {
   trigger: "axis",
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: "shadow"        // 默认为直线，可选为："line" | "shadow"
    }
  },
  legend: {
    data: ["销量(台)"]
  },
  xAxis: [
    {
      type: "category",
      data: {{ hm_name | tojson }},
      axisPointer: {
        type: "shadow"
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          fontSize: 12.5,
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      name: "销量(台)",
      axisLabel: {
        formatter: "{value} 万台",
        textStyle: {
          fontSize: 16,
        }
      }
    },

  ],
  series: [
    {
      name: "销量(台)",
      type: "bar",
      data: {{ hm_count | tojson }}
    }
  ]
};
hm_chart.setOption(hm_option);
</script>

<script>
// 手机销量排行横向条形图
let phone_dom = document.getElementById("phone");
let phone_chart = echarts.init(phone_dom);
let phone_option = {
  title: {
    text: "所有手机销量排行",
    subtext: "数据来自京东和苏宁 (下滑查看所有机型)",
    left: "5%"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  dataZoom: [
    {
      type: "slider",
      yAxisIndex: 0,
      zoomLock: true,
      width: 10,
      right: 10,
      top: 70,
      bottom: 20,
      start: 99,
      end: 100,
      handleSize: 0,
      showDetail: false,
    },
    {
      type: "inside",
      yAxisIndex: 0,
      start: 99,
      end: 100,
      zoomOnMouseWheel: false,
      moveOnMouseMove: true,
      moveOnMouseWheel: true
    }
  ],
  legend: {
    data: ["销量(台)"]
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "value",
    axisLabel: {
      formatter: "{value} 台"
    },
    min: 0,
  },
  yAxis: {
    type: "category",
    data: {{ phone_name | tojson }},
  },
  series: [
    {
      name: "销量(台)",
      type: "bar",
      data: {{ phone_count | tojson }}
    }
  ]
};
phone_chart.setOption(phone_option);
</script>

<script>
// 电商平台数据源总览多Y轴柱状图
let platform_dom = document.getElementById("platform");
let platform_chart = echarts.init(platform_dom);
let platform_option = {
  title: {
    text: "电商平台数据源总览"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross"
    }
  },
  grid: {
    right: "20%"
  },
  legend: {
    data: ["总销量", "商品数量", "官方自营销量占比", "非官方自营销量占比"]
  },
  xAxis: [
    {
      type: "category",
      axisPointer: {
        type: "shadow"
      },
      data: {{ platform_source | tojson }}
    }
  ],
  yAxis: [
    {
      type: "value",
      name: "总销量",
      position: "left",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#5470C6"
        }
      },
      axisLabel: {
        formatter: "{value} 万台"
      }
    },
    {
      type: "value",
      name: "商品数量",
      position: "right",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#EE6666"
        }
      },
      axisLabel: {
        formatter: "{value} 件"
      }
    },
    {
      type: "value",
      name: "销量百分比",
      min: 0,
      max: 100,
      position: "right",
      offset: 80,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#91CC75"
        }
      },
      axisLabel: {
        formatter: "{value} %"
      }
    },
  ],
  series: [
    {
      name: "总销量",
      type: "bar",
      data: {{ platform_tc | tojson }}
    },
    {
      name: "商品数量",
      type: "bar",
      yAxisIndex: 1,
      data: {{ platform_cc | tojson }}
    },
    {
      name: "官方自营销量占比",
      type: "bar",
      yAxisIndex: 2,
      data: {{ platform_sp | tojson }}
    },
    {
      name: "非官方自营销量占比",
      type: "bar",
      yAxisIndex: 2,
      data: {{ platform_nsp | tojson }}
    },
  ]
};
platform_chart.setOption(platform_option);
</script>
{% endblock %}